<template>
  <fieldset>
    <legend>List组件</legend>
    <button @click="add">添加</button>
    <ul>
      <li v-for="(item,index) in arr" :key="index">{{item}}</li>
    </ul>
  </fieldset>
</template>
<script>
  export default {
    data() {
      return {
        arr: ["吃饭", "睡觉", '打豆豆']
      }
    },
    methods: {
      add() {
        //this指向的是当前组件的实例
        // console.log(this);
        this.arr.push(this.data)

        // this.data= ""
      }
    },
    props: ['data'] //props传下来的值是个只读属性,不要去修改
  }
</script>